<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="孟建都">


    <meta name="subtitle" content="孟建都的博客">


    <meta name="description" content="孟建都的博客">


    <meta name="keywords" content="孟建都,博客">


<title>高德地图船轨迹回放项目DEMO | 孟建都的博客</title>



    <link rel="icon" href="/blog/favicon.ico">




    <!-- stylesheets list from _config.yml -->
    
    <link rel="stylesheet" href="/blog/css/style.css">
    



    <!-- scripts list from _config.yml -->
    
    <script src="/blog/js/script.js"></script>
    
    <script src="/blog/js/tocbot.min.js"></script>
    



    
    
        
    


<meta name="generator" content="Hexo 5.1.1"></head>
<body>
    <div class="wrapper">
        <header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo"><a href="/blog/">Jarrett&#39;s Blog</a></div>
            <div class="menu navbar-right">
                
                    <a class="menu-item" href="/blog/archives">文章</a>
                
                    <a class="menu-item" href="/blog/about">关于</a>
                
                <input id="switch_default" type="checkbox" class="switch_default">
                <label for="switch_default" class="toggleBtn"></label>
            </div>
        </div>
    </nav>

    
    <nav class="navbar-mobile" id="nav-mobile">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a href="/blog/">Jarrett&#39;s Blog</a><a id="mobile-toggle-theme">·&nbsp;Light</a>
                </div>
                <div class="menu-toggle" onclick="mobileBtn()">&#9776; Menu</div>
            </div>
            <div class="menu" id="mobile-menu">
                
                    <a class="menu-item" href="/blog/archives">文章</a>
                
                    <a class="menu-item" href="/blog/about">关于</a>
                
            </div>
        </div>
    </nav>

</header>
<script>
    var mobileBtn = function f() {
        var toggleMenu = document.getElementsByClassName("menu-toggle")[0];
        var mobileMenu = document.getElementById("mobile-menu");
        if(toggleMenu.classList.contains("active")){
           toggleMenu.classList.remove("active")
            mobileMenu.classList.remove("active")
        }else{
            toggleMenu.classList.add("active")
            mobileMenu.classList.add("active")
        }
    }
</script>
        <div class="main">
            <div class="container">
    
    

    
    <article class="post-wrap">
        <header class="post-header">
            <h1 class="post-title">高德地图船轨迹回放项目DEMO</h1>
            
                <div class="post-meta">
                    
                        Author: <a itemprop="author" rel="author" href="/">孟建都</a>
                    

                    
                        <span class="post-time">
                        Date: <a href="#">九月 7, 2020&nbsp;&nbsp;10:49:07</a>
                        </span>
                    
                    
                </div>
            
        </header>

        <div class="post-content">
            <blockquote>
<p>引用高德地图web js 2.0版本，注意动态引入插件</p>
</blockquote>
<ul>
<li>DEMO地址</li>
</ul>
<p><a target="_blank" rel="noopener" href="http://chuan.test.xsck.club/">demo地址</a></p>
<ul>
<li>定义一个map对象<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> map = <span class="keyword">new</span> AMap.Map(<span class="string">&#x27;container&#x27;</span>, &#123;</span><br><span class="line">    center: [<span class="number">114.534123</span>, <span class="number">22.574786</span>],</span><br><span class="line">    zoom: <span class="number">21</span></span><br><span class="line">&#125;)</span><br><span class="line">AMap.plugin([</span><br><span class="line">    <span class="string">&#x27;AMap.Scale&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;AMap.HawkEye&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;AMap.Polyline&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;AMap.MoveAnimation&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;AMap.Icon&#x27;</span></span><br><span class="line">], <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺</span></span><br><span class="line">    map.addControl(<span class="keyword">new</span> AMap.Scale())</span><br><span class="line">    <span class="comment">// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图</span></span><br><span class="line">    map.addControl(<span class="keyword">new</span> AMap.HawkEye(&#123; <span class="attr">isOpen</span>: <span class="literal">true</span> &#125;))</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li>创建点<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> marker = <span class="keyword">new</span> AMap.Marker(&#123;</span><br><span class="line">    position: <span class="keyword">new</span> AMap.LngLat(<span class="number">114.534123</span>, <span class="number">22.574786</span> ),</span><br><span class="line">    content: <span class="string">&#x27;点&#x27;</span>, <span class="comment">//可以是html标签</span></span><br><span class="line">    anchor: <span class="string">&#x27;bottom-center&#x27;</span>,</span><br><span class="line">    autoRotation: <span class="literal">true</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li>创建线<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">startLine = <span class="keyword">new</span> AMap.Polyline(&#123;</span><br><span class="line">    map: map,</span><br><span class="line">    showDir: <span class="literal">true</span>,</span><br><span class="line">    strokeColor: <span class="string">&#x27;black&#x27;</span>, <span class="comment">// 线颜色</span></span><br><span class="line">    <span class="comment">// strokeOpacity: 1,     //线透明度</span></span><br><span class="line">    strokeWeight: <span class="number">1</span>, <span class="comment">// 线宽</span></span><br><span class="line">    path: [], <span class="comment">//一个点的数组</span></span><br><span class="line">    <span class="comment">// strokeStyle: &quot;solid&quot;  //线样式</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li>通过两个点计算角度<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">calcAngle</span>(<span class="params">start, end</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> p_start = map.lngLatToContainer(start),</span><br><span class="line">    p_end = map.lngLatToContainer(end);</span><br><span class="line">    <span class="keyword">let</span> diff_x = p_end.x - p_start.x,</span><br><span class="line">    diff_y = p_end.y - p_start.y;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">360</span>*<span class="built_in">Math</span>.atan2(diff_y, diff_x)/(<span class="number">2</span>*<span class="built_in">Math</span>.PI)+<span class="number">90</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>改变点的角度<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">marker.setAngle(calcAngle(points[value <span class="number">-1</span>],points[value]));</span><br></pre></td></tr></table></figure></li>
</ul>

        </div>

        
            <section class="post-copyright">
                
                    <p class="copyright-item">
                        <span>Author:</span>
                        <span>孟建都</span>
                    </p>
                
                
                
                

            </section>
        
        <section class="post-tags">
            <div>
                <span>Tag(s):</span>
                <span class="tag">
                    
                </span>
            </div>
            <div>
                <a href="javascript:window.history.back();">back</a>
                <span>· </span>
                <a href="/blog/">home</a>
            </div>
        </section>
        <section class="post-nav">
            
                <a class="prev" rel="prev" href="/blog/2020/09/07/%E9%85%8D%E7%BD%AEmaven%E7%9A%84%E9%98%BF%E9%87%8C%E4%BA%91%E9%95%9C%E5%83%8F/">配置maven的阿里云镜像</a>
            
            
            <a class="next" rel="next" href="/blog/2020/09/07/%E5%88%9D%E8%AF%86%E5%BE%AE%E6%9C%8D%E5%8A%A1/">初识微服务</a>
            
        </section>


    </article>
</div>

        </div>
        <footer id="footer" class="footer">
    <div class="copyright">
        <span>© 孟建都 | Powered by <a href="https://hexo.io" target="_blank">Hexo</a> & <a href="https://github.com/Siricee/hexo-theme-Chic" target="_blank">Chic</a></span>
    </div>
</footer>

    </div>
</body>
</html>
